<template>
	<view class="filter-parent-content" v-bind:style="{ maxHeight: height }">
		<view class="filter-item" v-bind:style="{ color: getColor(level), width: getWidth(level),backgroundColor:'#ffffff'}"
		 :key="itemOut.key" v-for="(itemOut, level) in StackList">
			<view class="filter-item-inner" :key="item.value" v-bind:style="{ backgroundColor: getActiveColor(item, level),color:getActiveTextColor(item, level),margin:getActiveTextMargin(item, level) ,borderBottom: getBorder(level) }"
			 v-for="(item,index) in itemOut.list" @click="selItemFun(item, level ,index)">
				<view v-bind:style="{ width: getcontentWidth(level),flex:getFlex(level)}">{{ item.text }}</view>
				<icon type="success_no_circle" size="16" color='#008BFF' v-if="StackSelectList[level].value==item.value&&level>0 && mineChecked" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'filterItem',
		props: {
			model: {
				//当前节点数据
				type: Array
			},
			root: {
				//节点信息
				type: Object
			},
			animate: {
				type: String,
				default: 'animated fadeIn'
			},
			height: {
				//弹窗高度
				type: String,
				default: '300px'
			},
			selectData: {
				type: Boolean,
				default: false
			},
			mineChecked: {
				type: Boolean
			}
		},

		data() {
			return {
				defaultColor: {
					//默认
					color: '#909090',
					backgroundColor: 'white',
					backgroundColorActive: '#dad8d8'
				},
				colorList: [
					//字体颜色及背景颜色配置
					{
						color: '#333333',
						backgroundColor: '#F9F9F9',
						// backgroundColorActive: '#e8e8e8',
						backgroundColorActive: '#FFFFFF',
						colorActive: '#196DEC'
					},
					{
						color: '#333333',
						// backgroundColor: '#e8e8e8',
						backgroundColor: '#FFFFFF',
						backgroundColorActive: '#FFFFFF',
						colorActive: '#196DEC'
					},
					{
						color: '#333333',
						backgroundColor: '#F9F9F9',
						backgroundColorActive: '#FFFAFA',
						colorActive: '#196DEC'
					},
					{
						color: '#333333',
						backgroundColor: '#F9F9F9',
						backgroundColorActive: 'white'
					}
				],
				StackList: [], //列表栈
				StackSelectList: [], //选中项栈
				widthList: [], //宽度列表
				contentwidthList: ['252rpx', 'auto'],
				flexList: ['none', '1'],
				borderData: ['0.5rpx solid #F9F9F9', '0.5rpx solid #F2F2F2'],
				marginData: ['0', '0 20rpx']
			};
		},
		watch: {
			selectData(v) {
				if (!this.selectData) {
					// console.log('selectData', this.selectData)
					// this.StackList = [];
					for (let k of this.StackSelectList) {
						k.value = ''
					}
					this.widthList = [];
				}
			},
			model() {
				this.StackList = []; //列表栈
				this.StackSelectList = []; //选中项栈 
				if (this.model) {
					// console.log(this.model)
					this.popIn(this.model);
				}
			}
		},
		created() {
			if (this.model) {
				this.popIn(this.model);
			}
		},
		methods: {
			getColorItem(level) {
				return this.colorList.length < level + 1 ? this.defaultColor: this.colorList[level];
			},
			getColor(level) {
				//计算项的颜色
				return this.getColorItem(level).color;
			},
			getActiveColor(item, level) {
				var colorItem = this.getColorItem(level);
				if (item.value == this.StackSelectList[level].value && this.mineChecked) {
					return colorItem.backgroundColorActive;
				} else return colorItem.backgroundColor;
			},
			getActiveTextColor(item, level) {
				var colorItem = this.getColorItem(level);
				if (item.value == this.StackSelectList[level].value && this.mineChecked) {
					return colorItem.colorActive;
				} else return colorItem.color;
			},
			getActiveTextMargin(item, level) {
				return this.marginData[level]
			},
			popIn(List) {
				//进栈
				this.StackList.push({
					list: List,
					key: Math.random()
				});

				var parentValue = {
					value: '',
					text: ''
				};
				this.StackSelectList.push(parentValue);
			},
			popOut(length) {
				if (length < 1) {
					return;
				}
				//出栈
				length = length ? length : 1;
				if (length >= this.StackList.length) {
					length = this.StackList.length - 1;
				}

				var start = this.StackList.length - length;
				this.StackList.splice(start, length);
				this.StackSelectList.splice(start, length);
			},
			getCity(item, level, index) {
				this.$request.get({
					url: 'region/queryCityByProvinceId.json',
					data: {
						provinceId: item.regionId
					},
				}).then(res => {
					for (let i = 0; i < res.length; i++) {
						res[i].value = res[i].regionId;
						res[i].text = res[i].name;
					}
					item.children = res;
					var StackItem = !item.children || item.children.length == 0 ? [] : item.children;
					level++;

					//堆栈选定信息
					var opIndex = level - 1;
					var StackSelectItem = {
						value: item.value,
						text: item.text
					};

					if (this.StackSelectList[opIndex].value == item.value) {
						//重复点击
						return;
					}

					//触发项的层级比当前展开的最深层浅，需要把旧的出栈，再进栈
					var popLength = this.StackList.length - level;
					if (popLength > 0) this.popOut(popLength); //出栈旧的

					//修改选中列表
					this.$set(this.StackSelectList, opIndex, StackSelectItem);

					if (StackItem.length != 0) {
						//选定项有下一级
						//修改选中列表
						this.$set(this.StackSelectList, opIndex, StackSelectItem);
						//进栈新的
						this.popIn(StackItem);
					}

					var returnData = {
						root: this.root,
						nodes: this.StackSelectList.filter(a => {
							return a.value != '';
						}),
						data: item
					};
					returnData = JSON.parse(JSON.stringify(returnData));
					returnData.clickIndex = index;
					this.$emit('change', returnData);
					if (item.optionType != 1 && StackItem.length == 0)
						//没有子项
						this.$emit('select', returnData);

					this.setWidth();
				})
			},
			selItemFun(item, level, index) {
				if (item.optionType == 1 && !item.children) {
					// if(item.children&&item.children.length>0){
					// 	return false
					// }
					this.getCity(item, level, index);
					return false
				}
				//项点击
				var StackItem = !item.children || item.children.length == 0 ? [] : item.children;
				level++;

				//堆栈选定信息
				var opIndex = level - 1;
				var StackSelectItem = {
					value: item.value,
					text: item.text
				};

				if (this.StackSelectList[opIndex].value == item.value) {
					//重复点击
					return;
				}

				//触发项的层级比当前展开的最深层浅，需要把旧的出栈，再进栈
				var popLength = this.StackList.length - level;
				if (popLength > 0) this.popOut(popLength); //出栈旧的

				//修改选中列表
				this.$set(this.StackSelectList, opIndex, StackSelectItem);

				if (StackItem.length != 0) {
					//选定项有下一级
					//修改选中列表
					this.$set(this.StackSelectList, opIndex, StackSelectItem);
					//进栈新的
					this.popIn(StackItem);
				}

				var returnData = {
					root: this.root,
					nodes: this.StackSelectList.filter(a => {
						return a.value != '';
					}),
					data: item
				};
				returnData = JSON.parse(JSON.stringify(returnData));
				returnData.clickIndex = index;
				this.$emit('change', returnData);
				if (item.optionType != 1 && StackItem.length == 0)
					//没有子项
					this.$emit('select', returnData);

				this.setWidth();
			},
			getWidth(level) {
				//获取每列宽度
				return this.widthList[level];
			},
			getcontentWidth(level) {
				//获取每列宽度
				return this.contentwidthList[level];
			},
			getFlex(level) {
				return this.flexList[level];
			},
			getBorder(level) {
				return this.borderData[level];
			},

			setWidth() {
				//设置列宽度
				//定义
				var len = this.StackList.length;
				var defaultLen = '314rpx';
				if (len == 1) this.widthList = [defaultLen];
				else if (len == 2) this.widthList = [defaultLen, '66%'];
				else if (len == 3) this.widthList = [defaultLen, defaultLen, defaultLen];
				else {
					for (var i = 0; i < len; i++) {
						this.widthList.push(defaultLen);
					}
				}
			}
		},
	};
</script>

<style lang="less">
	.filter-parent-content {
		font-size: 16px;
		display: flex;
		width: 100%;
		/* height: 100%; */
		overflow-x: scroll;
		overflow-y: hidden;
	}

	.filter-item {
		min-width: 314upx;
		-webkit-transition: background-color 0.1s linear;
		transition: background-color 0.1s linear;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		overflow-x: hidden;
		overflow-y: scroll;
		text-align: center;
	}

	.filter-item .filter-item-inner {
		padding: 0 0 0 32upx;
		line-height: 96upx;
		overflow: hidden;
		-webkit-transition: background-color 0.1s linear;
		transition: background-color 0.1s linear;
		text-align: left;
		display: flex;
		align-items: center;


		view {
			height: 96upx;
			display: flex;
			align-items: center;
			word-wrap: break-word;
			word-break: break-all;
			white-space: pre-wrap;
			line-height: 30upx;
		}

		icon {
			display: flex;
			align-items: center;

		}
	}
</style>
